<template>
  <div class="container">
    <div class="forms-container">
      <div class="signin-signup">
        <transition-group name="animate" appear mode="out-in">
          <!-- 登录 -->
          <form @submit.prevent class="sign-in-form" v-show="isLogin" key="1">
            <h2 class="title">登录</h2>
            <div class="input-field">
              <i class="el-icon-user-solid"></i>
              <input type="text" placeholder="用户名"
                v-model="userInfo.username" 
                @focus="nameTip=''"
                @blur="listenUserNameChange" />
            </div>
            <span class="tip">{{nameTip}}</span>
            <div class="input-field">
              <i class="el-icon-success"></i>
              <input type="password" placeholder="密码" 
                v-model="userInfo.password"
                @focus="passTip1=''"
                @blur="listenPassWordChange" />
            </div>
            <span class="tip">{{passTip1}}</span>
            <input type="submit" value="登录" class="btn solid" @click="handleLogin" />
            <a @click="changeForm">注册</a>
          </form>

          <!-- 注册 -->
          <form @submit.prevent class="sign-up-form" v-show="!isLogin" key="2">
            <h2 class="title">注册</h2>
            <div class="input-field">
              <i class="el-icon-user-solid"></i>
              <input type="text" placeholder="用户名" 
                v-model="userInfo.username"
                @focus="nameTip=''"
                @blur="listenUserNameChange" />
            </div>
            <span class="tip">{{nameTip}}</span>
            <div class="input-field">
              <i class="el-icon-success"></i>
              <input type="password" placeholder="密码" 
                v-model="userInfo.password"
                @focus="passTip1=''"
                @blur="listenPassWordChange" />
            </div>
            <span class="tip">{{passTip1}}</span>
            <div class="input-field">
              <i class="el-icon-circle-check"></i>
              <input type="password" placeholder="确认密码" 
                v-model="userInfo.checkpass"
                @focus="passTip2=''"
                @blur="listenPassWordChange" />
            </div>
            <span class="tip">{{passTip2}}</span>
            <input type="submit" value="注册" class="btn solid" @click="handleRegister" />
            <a @click="changeForm">登录</a>
          </form>
        </transition-group>
      </div>
    </div>
  </div>
</template>

<script>
import { reqUserLogin, reqUserRegister } from "@/api";
export default {
  name: "Login",
  data() {
    return {
      userInfo:{
        username:'',
        password:'',
        checkpass:'',
      },
      isLogin: true,
      nameTip:'',
      passTip1:'',
      passTip2:'',
      nameReg: /^[a-zA-Z0-9_-]{4,20}$/,
      passReg: /^\w{6,16}$/
    };
  },
  methods:{
    // 改变登录或者注册状态
    changeForm(){
      this.isLogin = !this.isLogin
      this.nameTip = this.passTip1 = this.passTip2 = ''
    },
    // 登录
    handleLogin(){
      if(this.listenUserNameChange()&&this.listenPassWordChange){
        let {username:phone,password} = this.userInfo
        reqUserLogin({phone,password}).then(response=>{
          // console.log(response);
          if(response.data.state){
            this.notifySucceed('登录成功!')
            // 保存token信息
            const token = response.data.token
            localStorage.setItem('token', token)
            this.$store.commit('SETLOGIN', token)
            this.$router.push('/home')
          }
          else this.notifyError('用户不存在或密码错误!')
        })
      } else this.notifyError('登录失败!')
    },
    // 注册
    handleRegister(){
      if(this.listenUserNameChange()&&this.listenPassWordChange()&&this.listenerCheckPass()){
        let {username:phone,password} = this.userInfo
        reqUserRegister({
          userType:'admin',
          phone,
          password,
          name:phone,
          age:1,
        }).then(response=>{
          if(response.data == 1) {
            this.notifySucceed('注册成功!')
            this.changeForm()
          } else this.notifyError('注册失败!')
        }).catch(r=>this.notifyError('注册失败!'))
      } else this.notifyError('注册失败!')
    },
    // 监听用户名输入
    listenUserNameChange(){
      if (!this.nameReg.test(this.userInfo.username)){
        this.nameTip = '用户名错误'
        return false
      }
      return true
    },
    // 监听密码输入
    listenPassWordChange(){
      if (!this.passReg.test(this.userInfo.password)){
        this.passTip1 = '密码格式不对'
        return false
      } 
      return true
    },
    // 确认密码
    listenerCheckPass(){
      if (this.userInfo.checkpass!==this.userInfo.password){
        this.passTip2 = '密码不一致'
        return false
      }
      return true
    }
  }

};
</script>

<style scoped>

/* 动画 进入的起点、离开的终点 */
.animate-enter,
.animate-leave-to{
  opacity: 0;
}
.animate-enter-active,
.animate-leave-active{
  transition: all .3s ease;
}
/* 进入的终点 离开的起点*/
/* .animate-leave,
.animate-enter-to{

} */


.container {
  position: relative;
  width: 100%;
  /* 视口高度 */
  min-height: 100vh;
  background-color: #fff;
  overflow: hidden;
}

.forms-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


.sign-in-form,
.sign-up-form{
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%,-50%);
}


form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 2rem;
  color: #444;
  margin-bottom: 10px;
}

.input-field {
  /* 响应式最大宽度为380px */
  max-width: 380px;
  width: 100%;
  height: 55px;
  background-color: #f0f0f0;
  margin: 5px 0;
  border-radius: 55px;
  display: grid;
  grid-template-columns: 15% 85%;
  padding: 0 0.4rem;
}

.input-field i {
  text-align: center;
  line-height: 55px;
  color: #acacac;
  font-size: 1.1rem;
}

.input-field input {
  height: 55px;
  width: 300px;
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
}

.input-field input::placeholder {
  font-size: 1rem;
  color: #aaa;
  font-weight: 500;
}

.tip{
  position: relative;
  top: -5px;
  height: 15px;
  color: red;
  font-size: .8rem;
}

.btn {
  width: 150px;
  height: 49px;
  border: none;
  outline: none;
  border-radius: 49px;
  font-size: 1.1rem;
  color: #fff;
  background-color: #5995fd;
  font-weight: 600;
  margin: 5px 0;
  transition: 0.5s;
}

.btn:hover {
  background-color: #4d84e2;
}

a {
  font-size: 1rem;
  color: #4d84e2;
  cursor: default;
}
a:hover{
  text-decoration: underline;
}
</style>